<template>
    <footer class="footer">
      <span class="todo-count">剩余<strong>{{ allText }}</strong></span>
      <ul class="filters" @click="Fn">
        <li>
          <a :class="{selected : isSel === 'all'}" href="javascript:;" @click="isSel = 'all'">全部</a>
        </li>
        <li>
          <a href="javascript:;" :class="{selected : isSel === 'no'}" @click="isSel = 'no'">未完成</a>
        </li>
        <li>
          <a href="javascript:;" :class="{selected : isSel === 'yes'}" @click="isSel = 'yes'" >已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="empty">清除已完成</button>
    </footer>
  </template>
  
  <script>

  export default {
    methods:{
        Fn(){
            this.$emit('getIsSel',this.isSel)
        },
        empty(){
            this.$emit('clear')
        }
    },
    data(){
        return {
            isSel:'all'
        }
    },
    props:['list'],
    computed:{
        allText(){
            return this.list.length
        }
    },
    
  }
  </script>